import {useState, useEffect} from 'react'

export default function YzmButton() {
    let [btnText,setBtnText] = useState('获取验证码')
    let [disabled, setDisabled] = useState(false)
    let interval = null;
    useEffect(() => {
        return () => {
            console.log('unmount')
            if(interval) {
                clearInterval(interval)
            }else {
                setBtnText('重新获取验证码')
                setDisabled(false)
            }
        }
    },[])
    const startYzm = () => {
        let i = 60;
        interval = setInterval(() => {
            i--;
            if(i >= 0) {
                setBtnText(`${i}s`)
            }
        }, 1000);
    }
    return (
        <div>
            <button onClick = {startYzm}>{btnText}</button>
        </div>
    )
}